<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画相关</title>
    <style>
        img{
            position: relative;/*自定义动画*/
        }
    </style>
</head>
<body>
<input type="button" value="隐藏">
<input type="button" value="显示">
<input type="button" value="淡出">
<input type="button" value="淡入">
<input type="button" value="上划">
<input type="button" value="下划">
<input type="button" value="自定义">
<hr>
<hr>
<img src="../baidu.tieba/img/top_img_1.jpg" height="180" width="300"/>

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    let a;
    $("input:eq(0)").click(function () {
        $("img").hide(2000);//隐藏动画
    });
    $("input:eq(1)").click(function () {
        $("img").show(2000);//显示动画
    });
    $("input:eq(2)").click(function () {
        $("img").fadeOut(2000);//淡出动画
    });
    $("input:eq(3)").click(function () {
        $("img").fadeIn(2000);//淡入动画
    });
    $("input:eq(4)").click(function () {
        $("img").slideUp(2000);//上划动画
    });
    $("input:eq(5)").click(function () {
        $("img").slideDown(2000);//下划动画
    });
    $("input:eq(6)").click(function () {
        //平移动画必须设置定位方式为相对定位或绝对定位,因为left/top这些
        //样式默认的静态定位是无效的
        for(let i=50000;i>0;i--) {
            $("img").animate({"left": Math.random()*1600}, 100)
                .animate({"top": Math.random()*800}, 100)
                .animate({"left": Math.random()*1600}, 100)
                .animate({"width": Math.random()*500}, 100)
                .animate({"height": Math.random()*500}, 100)
                .animate({"top": Math.random()*800}, 100);//自定义动画

        }
    });
</script>
</body>
</html>